<template>
    <v-sheet :width="width">
        <v-container>
            <!-- 封面 -->
            <v-img class="rounded-lg" :height="height" :src="cover">
            <span style="position: absolute;top: 5px;right: 0">
                <slot name="topLabel"></slot>
            </span>
                <span style="position: absolute;bottom: 5px;right: 0">
                <slot name="bottomLabel"></slot>
            </span>
            </v-img>
            <!-- 标题 -->
            <div class="my-1 text-body-1">{{title}}</div>
            <div class="my-1 grey--text text--darken-1 text-body-2">{{subtitle}}</div>
        </v-container>
    </v-sheet>
</template>

<script>
    export default {
        name: "FilmCard",
        props: {
            width: {type: String, default: '224'}, // 卡片宽度
            height: {type: String, default: '280'}, // 图像高度
            cover: {type: String, required: true}, // 封面
            title: {type: String, required: true}, // 标题
            subtitle: {type: String, required: true}, // 副标题
            id: {type: Number, required: true}, // 标题
        }
    }
</script>

<style scoped>

</style>